<template>
  <div class="app-container customer-div">

    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
        <el-form-item label="业务员：">
          <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字：">
           <el-input v-model="listQuery.keyword" placeholder="联系人/手机号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>

        </el-form-item>
      </el-form>
    </div>

      <!--数据列表-->
    <div class="table-container">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column
              label="业务员"
              min-width="100"
              align="center">
            <template slot-scope="scope">
                 {{scope.row.userName}}
            </template>
          </el-table-column>
          <el-table-column  label="联系人" min-width="100" align="center">
            <template slot-scope="scope">
                  {{scope.row.buyerName}}
            </template>
          </el-table-column>
          <el-table-column
              label="手机号"
              min-width="100"
              align="center">
            <template slot-scope="scope">
              {{scope.row.phone}}
            </template>
          </el-table-column>
          <el-table-column
                label="收货地址"
                min-width="150"
                align="center">
              <template slot-scope="scope">
                {{scope.row.address }}
              </template>
          </el-table-column>
          <el-table-column
                label="创建时间"
                min-width="100"
                align="center">
            <template slot-scope="scope">
              {{scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column
              label="更新时间"
              min-width="100"
              align="center">
            <template slot-scope="scope">
              {{scope.row.updateTime}}
            </template>
          </el-table-column>
          <el-table-column
              label="创建人"
              min-width="100"
              align="center">
            <template slot-scope="scope">
                 {{scope.row.createName}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="合同数量"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.num}}
            </template>
          </el-table-column>

        </el-table>
      </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

  </div>
</template>
<script>
    import {getCustomerOption,orderGoodsList,getOrderUsersList,getCustomerSetting,authAddressList} from '@/api/partner'
    import {developAfterSaleCancel,developAfterSale} from '@/api/company'
    import store from '@/store'
    import { mapGetters } from 'vuex'

    const defaultListQuery={
      pageNum: 1,
      pageSize: 10,
      userId:'',
      keyword:'',
    };
    export default {
      name: "afterSales",
      data(){
          return {
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData: [],
              count: 0,
              listLoading: false,
              userOptionList:[],
              roles:store.getters.roles ? store.getters.roles : [],

          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),


      },
      created() {
        this.getList();
        this.getUserOptionList();
      },

      filters: {

      },
      methods:{

          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
                  this.userOptionList = res;
              })
          },

          handleSizeChange(val){
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
          },
          handleCurrentChange(val){
            this.listQuery.pageNum = val;
            this.getList();
          },

          handleSearchList(){
            this.listQuery.pageNum = 1;
            this.getList();
          },

          //获取列表
          getList() {
            this.listLoading = true;
            let listQuery = JSON.parse(JSON.stringify(this.listQuery));
            authAddressList(listQuery).then(response => {
              this.tableData = response.list;
              this.count = response.count;
              this.listLoading = false;
            }).catch(()=>{
              this.listLoading = false;
            });
          },

      },
    }
</script>

<style scoped lang="scss">

</style>
